<template>
  <div class="login-container">
    <div class="login-banner"></div>
    <div class="login-box">
      <img class="icon-qrcode" src="@/assets/images/icon_qrcode.png" alt="">
      <div class="login-title">
        <h2>CAR RENTAL</h2>
        <el-tag class="version">1.0</el-tag>
      </div>
      <el-form ref="formRef" :model="formData" :rules="formRules" size="large"
               @submit.native.prevent @keyup.enter.native="handleLogin">
        <!-- 账号 -->
        <el-form-item prop="account">
          <el-input v-model="formData.account" placeholder="账号">
            <template #prefix>
              <el-icon class="el-input__icon"><User/></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" placeholder="密码" show-password>
            <template #prefix>
              <el-icon class="el-input__icon"><Lock/></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="captcha">
          <el-input v-model="formData.captcha" placeholder="验证码">
            <template #prefix>
              <el-icon class="el-input__icon"><Picture/></el-icon>
            </template>
            <template #suffix>
              <el-image class="captcha-image" :src="captchaBase64" @click="getCaptcha" title="点击更换"/>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="formData.rememberMe">记住我</el-checkbox>
          <a href="javascript:" class="forgot-password">忘记密码？</a>
        </el-form-item>
        <el-form-item class="center">
          <el-button class="login-btn" type="primary" :loading="loading" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import router from '@/router'
import request from '@/utils/request'

const loading = ref(false)
const formRef = ref()
const formData = ref({
  account: undefined,
  password: undefined,
  captchaKey: '',
  captcha: '',
  rememberMe: false
})
const formRules = ref({
  account: [{required: true, message: '请输入账号'}],
  password: [{required: true, message: '请输入密码'}],
  captcha: [{required: true, message: '请输入验证码'}]
})

const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      ElMessage.error('请正确填写参数')
      return
    }
    loading.value = true
    request.post('/api/login', formData.value)
        .then(res => {
          ElMessage.success('登录成功')
          localStorage.setItem('perms', res.data.perms)
          localStorage.setItem('nick', res.data.nickname)
          localStorage.setItem('avatar', res.data.avatar)
          localStorage.setItem('token', res.data.token)
          let redirect = router.currentRoute.value.query?.redirect
          router.push({path: redirect || '/'})
        })
        .catch(() => {
          getCaptcha()
          loading.value = false
        })
  })
}

// 验证码
const captchaBase64 = ref(undefined)
const getCaptcha = () => {
  let r = Math.random()
  request.get(`/api/captcha?r=${r}`).then(res => {
    formData.value.captchaKey = res.data.captchaKey
    captchaBase64.value = res.data.captchaBase64
  })
}
getCaptcha()

</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: url('~@/assets/images/bg_login.jpg') no-repeat center right;
  background-size: cover;
}

.login-banner {
  width: 44.37vw;
  height: 61.3vh;
  margin-right: 3rem;
  background: url('~@/assets/images/bg_login_ad.png') no-repeat 50%/contain;
}

.login-box {
  position: relative;
  box-sizing: border-box;
  width: 400px;
  height: 450px;
  padding: 25px 45px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);
}

.icon-qrcode {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.login-title {
  position: relative;
  margin-bottom: 2.5rem;
  text-align: center;
}

.login-title .version {
  position: absolute;
  top: 0;
  right: 0;
}

.captcha-image {
  height: 32px;
  margin-right: -10px;
  border-radius: 4px;
  cursor: pointer;
}

.forgot-password {
  margin-left: auto;
  text-decoration: none;
  color: #888;
}

.forgot-password:hover {
  color: #666;
}

.login-btn {
  width: 100%;
  font-size: 16px;
}

.center {
  text-align: center;
}

@media (max-width: 991px) {
  .login-banner {
    display: none;
  }
}

@media (max-width: 767px) {
  .login-container {
    height: 100%;
  }

  .login-box {
    width: 100%;
    margin: 1rem;
  }
}
</style>
